<template>
  <el-dialog v-model="isVisable" title="分配角色" @close="emit('myclose')">
    <el-select v-model="state.hasPermision" multiple placeholder="Select" style="width: 240px">
      <el-option
        v-for="item in state.permissionOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <template #footer>
      <span class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click="submitFn">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang='ts'>
import { AllocRoleToUserApi, GetAllRolesApi, GetRolesByIdApi } from '@/request/api';
import { ElMessage } from 'element-plus';
import { reactive, watch } from 'vue';

const emit = defineEmits(['myclose'])

const props = defineProps({
  isVisable: {
    type: Boolean,
    default: false,
  },
  userId: {
    type: Number,
    default: 0
  }
})

interface OptionModel {
  label: string;
  value: number;
}

interface IRoleState {
  hasPermision: number[];
  permissionOptions: OptionModel[];
}

const state = reactive<IRoleState>({
  // 这是要分配的用户已经拥有的权限
  hasPermision: [],
  // 这是从服务器上获取的所有的角色
  permissionOptions: []
})

// 监听 userId ，如果不是0，就是要分配角色了，就可以向服务器请求，当前被操作的用拥有哪些权限
watch(() => props.userId, (newVal) => {
  if (newVal === 0) return;
  GetAllRolesApi().then(res1 => {
    if (res1.code === 200) {
      // 获取了所有的角色
      // 把所有的角色渲染在 select的options里面
      state.permissionOptions = res1.data.map(item => ({ label: item.name, value: item.id }))
      // 向服务器请求当前被操作的用户的权限
      return GetRolesByIdApi(newVal)
    } else {
      return Promise.reject('获取角色列表失败')
    }
  }).then(res => {
    if (res.code === 200) {
      state.hasPermision = res.data.map(item => item.id)
    }
  }).catch(err => {
    ElMessage.error(err)
  })


})

const submitFn = () => {
  // 发送请求把修改后的角色同步到服务器
  AllocRoleToUserApi({
    adminId: props.userId,
    roleIds: state.hasPermision
  }).then(res => {
    if (res.code === 200) {
      // 提示用户
      ElMessage.success(res.message)
      // 关闭弹出
      emit('myclose')
    } else {

    }
  })
}
</script>
<style lang="less" scoped>
</style>